<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户登录</title>
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="icon" href="../img/favicon.gif" type="image/gif">
    <script>
        function init() {
            document.getElementById("btn_cookieShow").addEventListener("click", () => {
                let node = document.getElementsByClassName("cookieSelect")[0];
                if (node.hidden == true) {
                    node.hidden = false;
                    document.getElementById("btn_cookieShow").classList.add("change");
                } else {
                    node.hidden = true;
                    document.getElementById("btn_cookieShow").classList.remove("change");
                }
            }, false);
        }
        window.addEventListener("load", init, false);
    </script>
</head>

<body>
    <article class="login_article">
        <aside class="img_box"></aside>
        <aside class="login_article_image">
            <img src="../img/login_logo.jpg" title="logo">
            <div hidden class="errorMsg" style="color:red">用户名或密码错误！</div>
        </aside>
        <section>
            <fieldset>
                <legend hidden>用户登录</legend>
                <form action="" method="POST">
                    <label for="userName">用户名：</label>
                    <input type="text" name="userName" id="userName" placeholder="请输入用户名"><br>
                    <label for="password">密&nbsp;&nbsp;&nbsp;码：</label>
                    <input type="password" name="password" id="password" placeholder="请输入密码"><br>
                    <div id="btn_cookieShow"></div>
                    <div hidden class="cookieSelect">
                        <input type="checkbox" name="isCookie" value="yes" id="isCookie">
                        <label for="isCookie">
                            <span style="vertical-align:2px;">一周之内不需要登录</span>
                        </label>
                    </div>
                    <button id="btn_login" type="submit">登录</button>
                </form>
            </fieldset>
        </section>
    </article>
</body>

</html>